<%@page language="java" contentType="text/html; charset=utf-8"	pageEncoding="utf-8"%>
<%
	String familyId = (String) request.getAttribute("familyId");
%>
<html>
<head>
<script type="text/javascript" src="js/echarts.common.min.js"></script>
<script type="text/javascript">
var family_id= "<%=familyId%>";
console.log("当前户号:" + family_id);

//var year_amounts=[120, 135, 155, 88, 90, 138, 188, 206, 100, 89, 118, 128];        //年度用电数据
//var dates=['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];        		//时间数组
var year_amounts = [];
//var dates = [];

$(document).ready(function () {
	
	queryData();
});

//基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('container'));

// 指定图表的配置项和数据
option = {
    title : {
        text: '年度用电量数据',
        subtext: '测试数据'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['用电量']
    },
    toolbox: {
        show : true,
        feature : {
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'用电量',
            type:'bar',
            data:[],
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        }
    ]
};

         

myChart.showLoading();
myChart.setOption(option);

function queryData() {
	$.ajax({    //使用JQuery内置的Ajax方法
	    type : "post",        //post请求方式
	    async : true,        //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
	    url : "mouth-electric-monitor/list.do",    //请求发送到ShowInfoIndexServlet处
	    data : {familyId:family_id},        //请求内包含一个key为name，value为A0001的参数；服务器接收到客户端请求时通过request.getParameter方法获取该参数值
	    dataType : "json",        //返回数据形式为json
	    success : function(result) {
	    	myChart.hideLoading();
	    	var dataArray = result.data;
	        //请求成功时执行该函数内容，result即为服务器返回的json对象
	        if (dataArray != null && dataArray.length > 0) {
	            for(var i=0;i<dataArray.length;i++) {
	            	year_amounts.push(dataArray[i].useQuantity);        //挨个取出温度值并填入前面声明的温度数组
	                //dates.push(dataArray[i].month);
	            }
	            myChart.hideLoading();    //隐藏加载动画
	                
	            myChart.setOption({
	                /* xAxis: {
	                    data: dates
	                }, */
	                series: [
	                    {
	                    	name : '用电量',
	                	 	data : year_amounts
	                    }
	                ]
	            });
	        } else {
	            //返回的数据为空时显示提示信息
	            console.log("图表请求数据为空，可能服务器观测数据更新延时，请稍后再进行尝试，您可以稍后再试！");
	            myChart.hideLoading();
	        }
	    }, error : function(errorMsg) {
	        //请求失败时执行该函数
	        alert("图表请求数据失败，可能是服务器开小差了");
	        myChart.hideLoading();        
	    }
	});
}
</script>
</head>
<body>
	<div class="linkbar"><a>监控平台</a>/<a>家庭和电机监控</a>/<a>月用电量监控</a></div>
	<div id="container" style="height: 80%"></div>
</body>
</html>